<!-- 这是我的票券页面 -->
<template>
  <div class="c-bg-sgray">
    <div>
      <div class="c-ph24 c-pt30 c-flex-row c-pb30 c-bd-b1 c-bg-white">
        <div class="c-ww210 c-hh140 c-text-hidden c-flex-shrink0 c-br8">
          <vip-custom-img v-if="groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.avatar && (groupPurchaseInfo.prodInfo.avatar.coverType == 1 || groupPurchaseInfo.prodInfo.avatar.coverType == 2)" :cover="groupPurchaseInfo.prodInfo.avatar" :imgClass="'c-w100 c-h imgCloseBig c-br8'" :hasText="false" />
          <img v-else class="c-w100 c-h imgCloseBig c-br8" v-lazy="groupPurchaseInfo.avatar ? groupPurchaseInfo.avatar : require('@/assets/defult270.png')" alt="" :key="poster" />
        </div>
        <div class="c-pl20 c-w0 c-flex-grow1 c-maxh150 c-flex-column c-justify-sa">
          <div class="c-fs26 c-fc-xblack c-ww-bw c-ww-ba c-text-ellipsis2">{{groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.name : ''}}</div>
          <div class="c-fs20 c-fc-gray">有效期：{{groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.expireTime : ''}}</div>
        </div>
      </div>
      <div class="c-pt30">
        <div v-if="groupPurchaseInfo.quantity != 0">
          <div class="c-fs26 c-fc-xblack c-pb20 c-ph24">
            <span>我的票券：<span class="theme-fc c-fw-b">{{groupPurchaseInfo.quantity}}</span></span>
            <span class="c-ml26">已领取：<span class="theme-fc c-fw-b">{{groupPurchaseInfo.receiveCount}}</span></span>
          </div>
        </div>
        <div v-for="(item, index) in groupPurchaseList" :key="index" :class="index != groupPurchaseList.length - 1 ? 'c-mb20' : ''" class="c-p c-text-hidden c-mh24">
          <div @click="selectTicket(index)" :class="selectIndex == index ? 'theme-bd1' : ''" class="c-bg-white c-br12">
            <div class="c-ph24 c-fs26 c-fc-xblack c-fw600 c-hh80 c-bd-db1-mgray c-flex-row c-aligni-center c-justify-sb">
              <span class="">我的票券{{index + 1}}</span>
              <span v-show="selectIndex == index && item.encodeUserId == ''" class="iconfont c-fs36 theme-fc">&#xe796;</span>
              <span v-show="selectIndex != index && item.encodeUserId == ''" class="iconfont c-fs36 c-fc-gray">&#xe6f7;</span>
            </div>
            <div class="c-ph24 c-pt12 c-pb24">
              <div>
                <span class="c-fs24 c-fc-sgray">昵称：</span>
                <span class="c-fs24 c-fc-gray">{{item.nickname}}</span>
              </div>
              <div class="c-mt12 c-lh">
                <span class="c-fs24 c-fc-sgray">电话：</span>
                <span class="c-fs24 c-fc-gray">{{item.mobile}}</span>
              </div>
              <div class="c-mt12 c-lh">
                <span class="c-fs24 c-fc-sgray">ID号：</span>
                <span class="c-fs24 c-fc-gray">{{item.encodeUserId}}</span>
              </div>
            </div>
            <div v-if="item.nickname || item.mobile || item.userId" class="c-pa c-fc-sgray iconfont got-icon">&#xe939;</div>
          </div>
          <div :class="selectIndex == index ? 'theme-bd1' : ''" class="c-ww16 c-hh16 c-br16 c-pa c-bg-sgray left-circular"></div>
          <div :class="selectIndex == index ? 'theme-bd1' : ''" class="c-ww16 c-hh16 c-br16 c-pa c-bg-sgray right-circular"></div>
        </div>
      </div>

      <!-- 分享 -->
      <div v-if="groupPurchaseInfo.quantity != 0" class="c-ph24 c-pf c-p-b0 c-w100 c-maxw640 c-bd-t1 c-bg-white c-hh88 c-flex-row c-aligni-center">
        <div :class="(groupPurchaseInfo.quantity - groupPurchaseInfo.receiveCount) > 0 ? 'theme-bg' : 'c-bg-ccc'" class="c-fc-white c-lh c-flex-row c-flex-center c-br36 c-hh64 c-w0 c-flex-grow1 c-fs26" @click="clickShare">
          赠送票券
        </div>
      </div>
    </div>

    <!-- <div
      class="c-w100 c-h c-pf c-p-t0 c-p-b0 c-p-l999999"
    >
      <div class="c-flex-column c-aligni-center shareposter" id="canvasSharePoster">
        <img class="share-img" src="https://cdn-oss-beijing.myckjr.com/lj7l/resource/imgs/61b14f2b/admin-fe_lj7l_ZCRnzMKFST4wh7JD8RFQ.png?x-oss-process=style/w800" alt="">
        <div class="c-ww300 c-bg-white c-br6 course-wrap">
          <vip-custom-img v-if="groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.avatar && (groupPurchaseInfo.prodInfo.avatar.coverType == 1 || groupPurchaseInfo.prodInfo.avatar.coverType == 2)" :cover="groupPurchaseInfo.prodInfo.avatar" :imgClass="'c-w100 c-hh200 course-cover c-br16'" :hasText="false" />
          <img v-else class="c-w100 c-hh200 course-cover c-br16" :src="groupPurchaseInfo.avatar ? groupPurchaseInfo.avatar : require('@/assets/defult270.png')" alt="">
          <div class="c-fs18 c-fw-b c-fc-xblack c-ph12 c-mt8 course-name">{{cutstr(groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.name : '',56)}}</div>
          <div class="c-ph12 c-flex-row c-justify-sb c-mt8 c-aligni-center">
            <div class="c-fs18 theme-fc">￥{{groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.price : ''}}</div>
            <div class="c-fs18 c-fc-sblack">x1</div>
          </div>
        </div>
        <div class="c-flex-row c-aligni-center mt108">
          <div class="c-flex-column c-aligni-center">
            <div class="c-fs14 c-fc-white">长按识别二维码</div>
            <div class="c-flex-row c-flex-center translucent-white80 c-ww100 c-hh24 c-br12 c-fs14 c-mt12">扫码领取></div>
          </div>
          <img class="c-ww72 c-hh72 c-br8 c-ml20" :src="$addXossFilter(qrCodeImg, require('@/assets/defult270.png'))" alt="">
        </div>
      </div>

    </div> -->
    <div
      class="c-w100 c-h c-pf c-p-t0 c-p-b0 c-p-l999999"
    >
      <div class="c-flex-column c-aligni-center shareposter" id="canvasSharePoster">
        <img class="share-img" src="https://knowledge-payment.oss-cn-beijing.aliyuncs.com/lj7l/resource/imgs/818d36e4/admin-fe_lj7l_uploadBox_GRf2578YZ2aebPcRNf6C.png" alt="">
        <div class="c-ww300 c-bg-white c-br6 course-wrap">
          <div class="c-w100 c-hh200" v-if="groupPurchaseInfo.prodInfo && groupPurchaseInfo.prodInfo.avatar && (groupPurchaseInfo.prodInfo.avatar.coverType == 1 || groupPurchaseInfo.prodInfo.avatar.coverType == 2)">
            <vip-custom-img :cover="groupPurchaseInfo.prodInfo.avatar" :imgClass="'c-w100 c-hh200 course-cover c-br16'" :hasText="false" />
          </div>
          <img v-else class="c-w100 c-hh200 course-cover c-br16" :src="groupPurchaseInfo.avatar ? groupPurchaseInfo.avatar : require('@/assets/defult270.png')" alt="">
          <div class="c-fs18 c-fw-b c-fc-xblack c-ph12 c-mt12 c-mb12">{{cutstr(groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.name : '',56)}}</div>
          <div class="c-ph12 c-flex-row c-justify-sb c-mt8 c-aligni-center">
            <div class="c-fs20 c-fc-xmlred">￥{{groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.price : ''}}</div>
            <div class="c-fs18 c-fc-sblack">x1</div>
          </div>
        </div>
        <div class="c-fs16 c-fc-sblack c-mt24 c-ph12 c-textAlign-l c-ww300">有效期：{{groupPurchaseInfo.prodInfo ? groupPurchaseInfo.prodInfo.expireTime : ''}}</div>
        <div class="c-flex-row c-aligni-center c-mt90">
          <img class="c-ww76 c-hh76 c-br8" :src="$addXossFilter(qrCodeImg, require('@/assets/defult270.png'))" alt="">
          <div class="c-flex-column c-aligni-center c-ml20">
            <div class="c-fs18 c-fc-white">长按识别二维码</div>
            <div class="c-flex-row c-flex-center translucent-white80 c-ww100 c-hh24 c-br12 c-fs14 c-mt12">扫码领取></div>
          </div>
        </div>
      </div>

    </div>
    <!-- 图片 -->
    <div @click.self="shareposter = false" class="c-w100 c-h c-pf c-p-t0 c-p-l0 c-p-b0 c-p-r0 c-translucent-balck50 c-pz6 c-flex-column c-flex-center" v-show="shareposter">
      <div id="spreadImg" class="share-pic c-br20"></div>
      <div class="c-fc-white c-fs22 c-textAlign-c c-mt24">长按保存图片分享给好友</div>
    </div>
    <loading-status-tem :noDataText="'暂无相关票券'" :showLoading="isLoading" :noMoreData="is_page == false && !isLoading && groupPurchaseInfo.quantity != 0" :noData="groupPurchaseInfo.quantity == 0" :isActivity="true"></loading-status-tem>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
// let isClick = false;
export default {
  name: "GroupPurchaseMyTicket",
  components: {
    loadingStatusTem,
    VipCustomImg
  },
  data() {
    return {
      shareposter: false,
      themeColor: localStorage.getItem("colorName") || 'mb5_default',
      groupPurchaseInfo: {},
      orderId: 0,
      groupPurchaseList: [],
      qrCodeImg: '',
      selectIndex: -1,
      selectId: 0,
      is_page:true,
      page: 1,
      limit: 20,
      isLoading: false
    };
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
  },
  mounted() {
    this.selectIndex = -1;
    this.selectId = 0;
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      this.html2canvas = res.default;
    })
    setDocumentTitle("我的票券");// eslint-disable-line
    this.orderId = this.$route.query.orderId;
    this.getGroupPurchaseInfo();
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  methods: {
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.is_page == true) {
          that.getTicketList();
        }
      });
    },
    getTicketList() {
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}enterpriseGroup/receiveList?orderId=${this.orderId}&page=${this.page}&limit=${this.limit}`, res => {
        if (this.groupPurchaseList == 1) {
          this.taskList = res.data;
        } else {
          let list = res.data;
          this.groupPurchaseList = this.groupPurchaseList.concat(list);
        }
        this.page = res.current_page < res.last_page ? (this.page + 1) : this.page;
        this.is_page = res.current_page < res.last_page ? true : false;
        this.isLoading = false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    selectTicket(ticketIndex) {
      if (this.groupPurchaseList[ticketIndex].encodeUserId != '') { //已被领取了，不能勾选
        return;
      }
      this.selectIndex = ticketIndex;
      this.selectId = this.groupPurchaseList[ticketIndex].id;
    },
    clickShare() {
      if ((this.groupPurchaseInfo.quantity - this.groupPurchaseInfo.receiveCount) <= 0) {
        return;
      }
      if (this.selectIndex == -1) {
        this.$showCjToast({
          text: "请选择要赠送的票券",
          type: "warn",
        });
        return;
      }
      this.getShareQrcode();
    },
    canvasToImage(ctx) {
      try {
        // let dataURL = ctx.canvas.toDataURL("image/jpg");
        let dataURL = ctx.canvas.toDataURL("image/png?x-oss-process=style/common");
        document.getElementById("spreadImg").innerHTML = '';
        document.getElementById("spreadImg").innerHTML = '<img src="' + dataURL + '" class="share-pic c-br20 app-save-img" alt>'
        this.$loading.hide();
      } catch (err) {
        this.$loading.hide();
        console.log(err.message);
        console.log(err.stack);
      }
    },
    cutstr(str, len) {
      var strLength = 0;
      var strLen = 0;
      var strCut = '';
      var a;
      strLen = str.length;
      for (var i = 0; i < strLen; i++) {
        a = str.charAt(i);
        strLength++;
        if (escape(a).length > 4) {
          strLength++
        }
        strCut = strCut.concat(a);
        if (strLength >= len) {
          strCut = strCut.concat("...");
          return strCut;
        }
      }
      if (strLength < len) {
        return str;
      }
    },
    //获取分享二维码
    getShareQrcode(aeIdArr) {
      utilJs.getMethod(`${global.apiurl}enterpriseGroup/getShareQrcode?orderId=${this.orderId}&receiveId=${this.selectId}`, res => {
        this.$loading.show({
          text: "分享海报生成中"
        });
        this.qrCodeImg = res;
        let shareposter = document.getElementById("canvasSharePoster");
        this.html2canvas(shareposter, {
          useCORS: true,
          backgroundColor: 'transparent',
          height: shareposter.offsetHeight, // 解决当前页面生成图片出现白边问题
          width: shareposter.offsetWidth,
        }).then(canvas => {// eslint-disable-line
          let ctx = canvas.getContext("2d");
          this.canvasToImage(ctx);
          this.shareposter = true;
        });
      });
    },
    getGroupPurchaseInfo() {
      utilJs.getMethod(`${global.apiurl}enterpriseGroup/enterpriseGroupOrder?orderId=${this.orderId}`, res => {
          this.groupPurchaseInfo = res;
          if (this.groupPurchaseInfo.quantity > 0) {
            this.getTicketList();
          }
          // this.groupPurchaseList = this.groupPurchaseInfo.list;
          // for (let i = 0; i < this.groupPurchaseList.length; i++) {
          //   if (this.groupPurchaseList[i].encodeUserId == '') {
          //     this.selectIndex = i;
          //     this.selectId = this.groupPurchaseList[i].id;
          //     break;
          //   }
          // }
        }
      );
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
  },
  activated() {
  },
  deactivated() {
  }
};
</script>
<style lang="less" scoped>
.mt76 {
  margin-top: 1.9rem;
}
.translucent-white80
{
  background-color: rgba(255, 255, 255, 0.8);
}
.left-circular {
  top: 1.8rem;
  left: -0.15rem;
}
.right-circular {
  top: 1.8rem;
  right: -0.15rem;
}
.got-icon {
  top: -0.2rem;
  right: -0.2rem;
  font-size: 2.8rem;
}
.theme-outline {
  outline: 1px solid #ff8831;
  outline: 1px solid var(--mb7color);
  outline-offset: -1px;
}
.share-pic {
  width: 12rem;
  height: 20rem;
}
.mt108 {
  margin-top: 2.7rem;
}
.shareposter {
  position: relative;
  width: 12rem;
  height: 20rem;
  top: 2rem;
  background-size: contain;
  .share-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  .course-wrap {
    margin-top: 6.1rem;
    // height: 7.6rem;
    padding-bottom: 0.5rem;
  }
  .course-cover {
    border: 2px solid #fff;
  }
  // .course-name {
  //   min-height: 1.2rem;
  // }
  .share-head {
    top: 0rem;
    transform: translateX(-50%);
    border: 0.1rem solid #fff;
    z-index: 1;
  }
  .share-name {
    position: absolute;
    top: 3rem;
    left: 50%;
    width: 6rem;
    text-align: center;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 0.55rem;
  }
  .share-con {
    position: absolute;
    top: 6.6rem;
    left: 50%;
    width: 10.3rem;
    transform: translateX(-50%);
    background: #fff3e2;
    border-radius: 0.1rem;
  }
  .share-qrcode {
    position: absolute;
    bottom: 1.55rem;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 3.5rem;
      height: 3.5rem;
      background: #ffffff;
      border: 0.1rem solid #ffffff;
      border-radius: 0.2rem;
      margin: 0 auto;
    }
    .share-qrcodeName {
      color: #fdf0c8;
      font-size: 0.55rem;
      margin-top: 0.75rem;
    }
  }
}
</style>


